<template>
  <transition name="fade" enter-active-class="fadeInDown" leave-active-class="fadeOutUp">
    <div id="tixian-box" v-show="txShow" :txShow="txShow">
      <div class="tx-top">提现到微信可快速到账</div>

      <div class="withdraw-form">
        <div class="withdraw-form__channel">
          <div class="channel_meta">
            <span class="iconfont icon-weixin channel_icon"></span>
            <div class="channel_name">微信</div>
          </div>

        </div>

        <div class="withdraw-form__money">
          <div class="money_meta">
            <span class="symbol">¥</span>
            <input class="withdraw_money" maxlength="5" type="number" v-model="tixian" id="txinput"
                   placeholder="请输入提现金额"/>
          </div>
          <div class="all_btn" @click="tixian=amount">全部提现</div>
        </div>

        <div class="withdraw-form__remark">
          <div class="remak_meta">
            <span class="remark_title">实时到账:</span>
            <span class="remark_money">¥{{tixian || 0}}</span>
          </div>
        </div>
      </div>

      <div class="withdraw-validator">
        <div class="withdraw-validator__mobile">
          <div class="mobile_title">手机号</div>
          <div class="mobile_input">
            <input
              maxlength="11"
              type="text"
              v-model="phone"
              name
              placeholder="请填写手机号"
            />
          </div>
        </div>
        <div class="withdraw-validator__code">
          <div class="code_title">验证码</div>
          <div class="code_input">
            <input
              maxlength="6"
              type="text"
              v-model="code"
              name
              placeholder="验证码"
            />
          </div>
          <div class="code_btn">
            <mu-button v-show="sendAuthCode" class="blur-btn btn fright withdraw-validator__send-code"
                       @click="yanzheng">发送验证码
            </mu-button>
            <mu-button v-show="!sendAuthCode" class="blur-btn btn fright withdraw-validator__send-code"
                       @click="yanzheng"><span>{{auth_time}}</span>秒后重新获取
            </mu-button>
          </div>
        </div>
      </div>

      <div class="withdraw-operations">
        <mu-button class="blur-btn btn out-btn" @click="close" id="close">取消</mu-button>
        <mu-button :disabled="isDisabled" class="blur-btn btn" style="width: 50%"
                   @click="tiXian">提现
        </mu-button>
      </div>
    </div>
  </transition>
</template>

<script>
    import {Toast} from "vant";
    import "vant/lib/toast/style/index";

    export default {
        name: "tixian",
        data() {
            return {
                txShow: false,
                tixian: "",
                amount: "",
                phone: "",
                code: "",
                isdis: true,
                isDisabled: false,
                sendAuthCode: true /*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */,
                auth_time: 0 /*倒计时 计数器*/
            };
        },
        methods: {
            close() {
                this.txShow = false;
            },
            Showtixiandiv() {
                this.txShow = true;
            },
            yanzheng() {
                if (this.phone == "") {
                    Toast("请输入手机号");
                    return;
                }
                this.$api.sendMsg(this.phone).then(res => {
                    if (res.data.message.code != 0) {
                        Toast(res.data.message.message);
                    } else {
                        Toast(res.data.message.message);
                        this.sendAuthCode = false;
                        this.auth_time = 60;
                        var auth_timetimer = setInterval(() => {
                            this.auth_time--;
                            if (this.auth_time <= 0) {
                                this.sendAuthCode = true;
                                clearInterval(auth_timetimer);
                            }
                        }, 1000);
                    }
                });
            },
            tiXian() {
                if (this.tixian == "") {
                    Toast("请输入提现金额");
                    return;
                }

                if (this.code == '') {
                    Toast("请输入验证码");
                    return;
                }
                this.isDisabled = true
                this.$api.cashWithdrawal(this.code, this.tixian).then(res => {
                    console.log(res);
                    if (res.data.message.code == 0) {
                        Toast("提现成功");
                        this.$router.push({path: "/admin/balance"});
                    } else if (res.data.message.code == -1) {
                        Toast(res.data.data);
                        this.$router.push({path: "/admin/balance"});
                    } else {
                        Toast({
                            message: res.data.message.message,
                            duration: 2000
                        });
                    }
                    this.isDisabled = false
                });
            }
        },
        mounted() {
            this.$api.getMyData().then(res => {
                this.amount = res.data.data.amount;
                if (this.amount == 0) {
                    this.$emit('tixianUnavailable')
                }
            });
        },
        watch: {
            tixian: function (v) {
                if (v > this.amount) {
                    this.tixian = this.amount;
                }
            }
        }
    };
</script>
<style scoped>
  #txinput {
    background: rgba(0, 0, 0, 0);
    border: none;
    width: 70%;
  }

  #txinput::placeholder {
    font-size: 16PX;
  }

  #tixian-box #close {
    width: 50%;
    border-radius: 0;
    background: rgba(30, 197, 241, .17);
  }
</style>
